<html lang="ch">
<head>
  <title>用户维护</title>
  <script src="/js/jquery-3.6.0.min.js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input id="file" type="file">
<button id="uploadBtn">上传</button>
<div id="imageBox">

</div>
<script>
  $("#uploadBtn").click(function () {
    console.log("文件上传");
    // 获取文件
    var files = $("#file").prop("files");
    if (files.length === 0) {
      alert("请选择文件");
      return;
    }
    var file = files[0];
    // 进行文件上传的操作
    var formData = new FormData();
    formData.append("file", file);
    $.ajax({
      url: "${pageContext.request.contextPath}/upload/file",
      type: "post",
      data: formData,
      // 告诉jQuery不要去设置Content-Type请求头
      contentType: false,
      // 告诉jQuery不要去处理发送的数据
      processData: false,
      success(res) {
        console.log(res);
        $("#imageBox").append(`
                    <div>
                        <img src="${pageContext.request.contextPath}` + res.data + `" alt=""/>
                    </div>`
        )
      }
    });
  });
</script>
</body>
</html>